<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极速反应测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        body {
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            gap: 20px;
            padding: 20px;
        }
        .title {
            font-size: 2.5rem;
            color: #333;
            text-align: center;
        }
        .info {
            font-size: 1.1rem;
            color: #666;
            text-align: center;
            max-width: 600px;
        }
        #game-area {
            width: 80%;
            max-width: 600px;
            height: 400px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            transition: background-color 0.3s;
        }
        #game-area:hover {
            box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        }
        #status-text {
            font-size: 1.5rem;
            color: #333;
            text-align: center;
        }
        #target {
            width: 80px;
            height: 80px;
            background-color: #4CAF50;
            border-radius: 50%;
            position: absolute;
            display: none;
            cursor: pointer;
            transition: transform 0.1s;
        }
        #target:hover {
            transform: scale(1.05);
        }
        .stats {
            display: flex;
            gap: 30px;
            margin-top: 10px;
        }
        .stat-item {
            text-align: center;
        }
        .stat-label {
            font-size: 1rem;
            color: #666;
            margin-bottom: 5px;
        }
        .stat-value {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
        }
        #reset-btn {
            padding: 12px 24px;
            background-color: #2196F3;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }
        #reset-btn:hover {
            background-color: #1976D2;
        }
    </style>
</head>
<body>
    <h1 class="title">极速反应测试</h1>
    <p class="info">点击「开始测试」后，等待目标出现，最快速度点击目标，系统将记录你的反应时间！</p >
    
    <div id="game-area" onclick="startGame()">
        <p id="status-text">点击此处开始测试</p >
        <div id="target" onclick="hitTarget(event)"></div>
    </div>
    
    <div class="stats">
        <div class="stat-item">
            <div class="stat-label">当前反应时间</div>
            <div class="stat-value" id="current-time">0 ms</div>
        </div>
        <div class="stat-item">
            <div class="stat-label">最快反应时间</div>
            <div class="stat-value" id="best-time">-- ms</div>
        </div>
        <div class="stat-item">
            <div class="stat-label">测试次数</div>
            <div class="stat-value" id="test-count">0</div>
        </div>
    </div>
    
    <button id="reset-btn" onclick="resetStats()">重置成绩</button>

    <script>
        let gameActive = false;
        let targetActive = false;
        let startTime = 0;
        let currentTime = 0;
        let bestTime = Infinity;
        let testCount = 0;
        const gameArea = document.getElementById('game-area');
        const statusText = document.getElementById('status-text');
        const target = document.getElementById('target');
        const currentTimeEl = document.getElementById('current-time');
        const bestTimeEl = document.getElementById('best-time');
        const testCountEl = document.getElementById('test-count');

        // 开始游戏（倒计时后出现目标）
        function startGame() {
            if (gameActive) return;
            gameActive = true;
            statusText.textContent = '3秒后开始...';
            gameArea.style.pointerEvents = 'none';

            // 3秒倒计时
            setTimeout(() => {
                statusText.textContent = '等待目标出现...';
                // 随机1-3秒后出现目标
                const randomDelay = Math.floor(Math.random() * 2000) + 1000;
                setTimeout(() => {
                    showTarget();
                    startTime = Date.now(); // 记录目标出现时间
                }, randomDelay);
            }, 3000);
        }

        // 显示目标（随机位置）
        function showTarget() {
            targetActive = true;
            target.style.display = 'block';
            // 计算目标随机位置（避免超出游戏区域）
            const areaWidth = gameArea.offsetWidth;
            const areaHeight = gameArea.offsetHeight;
            const targetSize = target.offsetWidth;
            const maxX = areaWidth - targetSize;
            const maxY = areaHeight - targetSize;
            const randomX = Math.floor(Math.random() * maxX);
            const randomY = Math.floor(Math.random() * maxY);
            target.style.left = `${randomX}px`;
            target.style.top = `${randomY}px`;
        }

        // 点击目标（计算反应时间）
        function hitTarget(event) {
            event.stopPropagation(); // 防止触发游戏区域点击
            if (!targetActive) return;
            targetActive = false;
            target.style.display = 'none';
            gameArea.style.pointerEvents = 'auto';

            // 计算反应时间
            currentTime = Date.now() - startTime;
            currentTimeEl.textContent = `${currentTime} ms`;
            
            // 更新测试次数和最佳成绩
            testCount++;
            testCountEl.textContent = testCount;
            if (currentTime < bestTime) {
                bestTime = currentTime;
                bestTimeEl.textContent = `${bestTime} ms`;
            }

            // 提示继续测试
            statusText.textContent = `反应时间：${currentTime} ms，点击继续测试`;
            gameActive = false;
        }

        // 重置成绩
        function resetStats() {
            currentTime = 0;
            bestTime = Infinity;
            testCount = 0;
            currentTimeEl.textContent = '0 ms';
            bestTimeEl.textContent = '-- ms';
            testCountEl.textContent = '0';
            statusText.textContent = '点击此处开始测试';
            gameActive = false;
            targetActive = false;
            target.style.display = 'none';
        }
    </script>
</body>
</html>